<div class="container">
  <mat-toolbar color="primary" *ngIf="canEdit">
    <mat-toolbar-row>
      <span class="example-spacer"></span>
      <button class="button tr" mat-flat-button color="basic" (click)="openDialog()">Добавить Товар</button>
    </mat-toolbar-row>
  </mat-toolbar>

  <mat-card class="example-card" *ngFor="let product of products">
    <mat-card-title>{{product.title}}</mat-card-title>

    
    <mat-card-content>
      <p>Цена: {{product.price | currency}}</p>
   
    </mat-card-content>
    <mat-card-actions>
      
      <button class="button tn" mat-flat-button color="primary" [routerLink]="['/product', product.id]">Подробнее</button>
      <button class="button tn" mat-flat-button color="primary" mat-button [matMenuTriggerFor]="menu">Ред.</button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item (click)="deleteItem(product.id)">Удалить</button>
        <button mat-menu-item (click)="openDialog(product)">Ред.</button>
      </mat-menu>
    </mat-card-actions>


  </mat-card>

</div>
